<template>
  <custom-modal-page :visible.sync="visible" type="fullScreen">
    <div class="rebar-process-container" v-loading="pageLoading">
      <div class="header" :header="getTitle(type)">
        <div class="state">
          <div>
            当前状态：
            <span :class="[checkStatusClass(completeStatus), 'status-text']">
              {{ checkStatusName(completeStatus) }}
            </span>
          </div>
          <a-button v-if="type == 6" @click="closeModal()"> 返回 </a-button>
        </div>
      </div>
      <div class="main">
        <!-- 头部流程 -->
        <flowList
          :source="flowSource"
          replaceFields="approveUser"
          v-if="flowSource.length > 0"
        >
        </flowList>
        <!-- 页面提流程 -->
        <a-form-model ref="form" :model="form">
          <custom-collapse :activeKey="activeKey" :panelList="panelList">
            <!-- 基本信息 -->
            <template slot="space_1">
              <a-row class="m-r-50">
                <a-col v-bind="span_1">
                  <a-form-model-item label="梁号">
                    <a-input v-model="form.componentParts" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="12">
                  <a-form-model-item label="桥梁名称">
                    <a-input v-model="form.bridgeName" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col v-bind="span_1">
                  <a-form-model-item label="幅别">
                    <a-input v-model="form.amClass" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col v-bind="span_1">
                  <a-form-model-item label="跨">
                    <a-input v-model="form.span" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col v-bind="span_1">
                  <a-form-model-item label="梁类型">
                    <a-input v-model="form.beamTypeDesc" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col v-bind="span_1">
                  <a-form-model-item label="下单人员">
                    <a-input v-model="form.createrName" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col v-bind="span_1">
                  <a-form-model-item label="下单时间">
                    <a-input v-model="form.createTime" disabled />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </template>
            <!-- 钢筋设计量 -->
            <template slot="space_2">
              <a-row
                class="m-r-50"
                v-for="(item, index) in form.gjInfoList"
                :key="index"
              >
                <a-col v-bind="span_1">
                  <a-form-model-item label="钢筋型号">
                    <a-input v-model="item.rebarModelDesc" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col v-bind="span_1">
                  <a-form-model-item label="钢筋直径(mm)">
                    <a-input v-model="item.rebarDiameterDesc" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col v-bind="span_1">
                  <a-form-model-item label="钢筋品种">
                    <a-input v-model="item.rebarTypeDesc" disabled />
                  </a-form-model-item>
                </a-col>
                <a-col v-bind="span_1">
                  <a-form-model-item label="数量(kg)">
                    <a-input v-model="item.rebarNum" disabled />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </template>
            <!-- 接单信息 -->
            <template slot="space_3">
              <a-row class="m-r-50">
                <a-col v-bind="span_1">
                  <a-form-model-item
                    label="计划完成时间"
                    prop="planCompleteTime"
                    :rules="{
                      required: type == 1 ? true : false,
                      message: '请选择计划完成时间',
                    }"
                  >
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.planCompleteTime"
                      format="YYYY-MM-DD"
                      valueFormat="YYYY-MM-DD"
                      placeholder="请选择计划完成时间"
                      :disabled="type == 1 ? false : true"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col v-bind="span_1" v-if="type > 1">
                  <a-form-model-item label="接单人">
                    <a-input v-model="form.receiveName" disabled></a-input>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </template>
            <!-- 退回信息 -->
            <template slot="space_4">
              <a-row class="m-r-50">
                <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
                  <a-form-model-item
                    label="退回原因"
                    prop="returnOrderDesc"
                    :rules="{
                      required: type == 2 ? true : false,
                      message: '请输入退回原因',
                    }"
                  >
                    <a-input
                      placeholder="请输入退回原因"
                      type="textarea"
                      v-model="form.returnOrderDesc"
                      :rows="4"
                      :disabled="type == 2 ? false : true"
                    />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </template>
            <!-- 生产加工 -->
            <template slot="space_5">
              <a-row class="m-r-50">
                <a-col v-bind="span_1">
                  <a-form-model-item
                    label="生产开始时间"
                    prop="produceTime"
                    :rules="{
                      required: type == 3 ? true : false,
                      message: '请选择生产开始时间',
                    }"
                  >
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.produceTime"
                      format="YYYY-MM-DD HH:mm:ss"
                      valueFormat="YYYY-MM-DD HH:mm:ss"
                      :show-time="{
                        defaultValue: moment('00:00:00', 'HH:mm:ss'),
                      }"
                      placeholder="请选择生产开始时间"
                      :disabled="type == 3 ? false : true"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col v-bind="span_1">
                  <a-form-model-item
                    label="生产完成时间"
                    prop="completeTime"
                    :rules="{
                      required: type == 3 ? true : false,
                      message: '请选择生产完成时间',
                    }"
                  >
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.completeTime"
                      format="YYYY-MM-DD HH:mm:ss"
                      valueFormat="YYYY-MM-DD HH:mm:ss"
                      :show-time="{
                        defaultValue: moment('00:00:00', 'HH:mm:ss'),
                      }"
                      placeholder="请选择生产开始时间"
                      :disabled="type == 3 ? false : true"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col v-bind="span_1">
                  <a-form-model-item
                    label="生产用量"
                    prop="produceUsage"
                    :rules="{
                      required: type == 3 ? true : false,
                      message: '请输入生产用量',
                    }"
                  >
                    <a-input
                      v-model="form.produceUsage"
                      allowClear
                      type="number"
                      placeholder="请输入生产用量"
                      style="width: 100%"
                      :disabled="type == 3 ? false : true"
                    />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row
                class="m-r-50"
                v-for="(item, index) in form.scJgList"
                :key="index"
              >
                <a-col v-bind="span_1">
                  <a-form-model-item
                    label="钢筋型号"
                    :prop="'scJgList.' + index + '.rebarModel'"
                    :rules="{
                      required: type == 3 ? true : false,
                      message: '请选择钢筋型号',
                    }"
                  >
                    <a-select
                      allowClear
                      :loading="rebarModeLoading"
                      v-model="form.scJgList[index].rebarModel"
                      :disabled="type == 3 ? false : true"
                      placeholder="请选择钢筋型号"
                    >
                      <a-select-option
                        :value="item.dicValue"
                        v-for="(item, index) in form.rebarModelSource"
                        :key="index"
                      >
                        {{ item.dicDesc }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col v-bind="span_1">
                  <a-form-model-item
                    label="钢筋直径(mm)"
                    :prop="'scJgList.' + index + '.rebarDiameter'"
                    :rules="{
                      required: type == 3 ? true : false,
                      message: '请选择钢筋直径',
                    }"
                  >
                    <a-select
                      allowClear
                      :loading="rebarDiameterLoading"
                      v-model="form.scJgList[index].rebarDiameter"
                      :disabled="type == 3 ? false : true"
                      placeholder="请选择钢筋直径"
                    >
                      <a-select-option
                        :value="item.dicValue"
                        v-for="(item, index) in form.rebarDiameterSource"
                        :key="index"
                      >
                        {{ item.dicDesc }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col v-bind="span_1">
                  <a-form-model-item
                    label="钢筋品种"
                    :prop="'scJgList.' + index + '.rebarType'"
                    :rules="{
                      required: type == 3 ? true : false,
                      message: '钢筋品种',
                    }"
                  >
                    <a-select
                      allowClear
                      :loading="rebarTypeLoading"
                      v-model="form.scJgList[index].rebarType"
                      :disabled="type == 3 ? false : true"
                      placeholder="请选择钢筋品种"
                    >
                      <a-select-option
                        :value="item.dicValue"
                        v-for="(item, index) in form.rebarTypeSource"
                        :key="index"
                      >
                        {{ item.dicDesc }}
                      </a-select-option>
                    </a-select>
                  </a-form-model-item>
                </a-col>
                <a-col v-bind="span_1" class="rebar-col-item">
                  <a-form-model-item
                    label="数量(kg)"
                    :prop="'scJgList.' + index + '.rebarNum'"
                    :rules="{
                      required: type == 3 ? true : false,
                      message: '请输入数量',
                    }"
                  >
                    <a-input
                      allowClear
                      v-model="form.scJgList[index].rebarNum"
                      :disabled="type == 3 ? false : true"
                      type="number"
                      placeholder="请输入数量"
                      style="width: 100%"
                    />
                  </a-form-model-item>
                  <!-- 操作 -->
                  <div class="operate-btn" v-if="type == 3">
                    <div
                      class="del"
                      @click="delScJgRebar(index)"
                      v-if="index < form.scJgList.length - 1"
                    >
                      删除
                    </div>
                    <div class="add" v-else @click="addScJgRebar()">
                      <bj-icon-font
                        type="jiahao"
                        color="#fff"
                        :size="10"
                      ></bj-icon-font>
                    </div>
                  </div>
                </a-col>
              </a-row>
            </template>
            <!-- 钢筋质检 -->
            <template slot="space_6">
              <a-row class="m-r-50">
                <a-col v-bind="span_2">
                  <a-form-model-item
                    label="质检时间"
                    prop="testTime"
                    :rules="{
                      required: type == 4 ? true : false,
                      message: '请选择质检时间',
                    }"
                  >
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.testTime"
                      format="YYYY-MM-DD HH:mm:ss"
                      valueFormat="YYYY-MM-DD HH:mm:ss"
                      :show-time="{
                        defaultValue: moment('00:00:00', 'HH:mm:ss'),
                      }"
                      placeholder="请选择质检时间"
                      :disabled="type == 4 ? false : true"
                    />
                  </a-form-model-item>
                </a-col>
                <a-col v-bind="span_2" v-if="type > 4">
                  <a-form-model-item label="质检人">
                    <a-input v-model="form.testName" disabled></a-input>
                  </a-form-model-item>
                </a-col>
                <a-col v-bind="span_2">
                  <a-form-model-item
                    label="是否合格"
                    prop="testResult"
                    :rules="{
                      required: type == 4 ? true : false,
                      message: '请选择是否合格',
                    }"
                  >
                    <a-radio-group
                      v-model="form.testResult"
                      :disabled="type == 4 ? false : true"
                    >
                      <a-radio :value="0"> 合格 </a-radio>
                      <a-radio :value="1"> 不合格 </a-radio>
                    </a-radio-group>
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row class="m-r-50">
                <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
                  <a-form-model-item label="上传图片">
                    <bjUploadImg
                      :viewMode="type == 4 ? false : true"
                      :count="10"
                      v-model="form.imageList"
                      @change="upLoadImage($event)"
                      @remove="deleteImage($event)"
                      replaceField="imagePath"
                    ></bjUploadImg>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </template>
            <!-- 生产完成信息 -->
            <template slot="space_7">
              <a-row class="m-r-50">
                <a-col v-bind="span_2">
                  <a-form-model-item label="生产完成时间">
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.completeTime"
                      format="YYYY-MM-DD HH:mm:ss"
                      valueFormat="YYYY-MM-DD HH:mm:ss"
                      :show-time="{
                        defaultValue: moment('00:00:00', 'HH:mm:ss'),
                      }"
                      placeholder="请选择生产完成时间"
                      :disabled="type == 5 ? false : true"
                    />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row class="m-r-50">
                <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
                  <a-form-model-item label="上传图片">
                    <bjUploadImg
                      :viewMode="type == 5 ? false : true"
                      :count="10"
                      v-model="form.imageList"
                      @change="upLoadImage($event)"
                      @remove="deleteImage($event)"
                      replaceField="imagePath"
                    ></bjUploadImg>
                  </a-form-model-item>
                </a-col>
              </a-row>
            </template>
          </custom-collapse>
        </a-form-model>
      </div>
      <div class="footer" v-if="type != 6">
        <a-button @click="closeModal()">取消 </a-button>
        <a-button type="primary" :loading="buttonLoading" @click="onSubmit()">
          确定
        </a-button>
      </div>
    </div>
  </custom-modal-page>
</template>

<script>
import moment from "moment";
import fromMixin from "./form";
import flowList from "@/components/flow-list";
import bjUploadImg from "@/components/bj-upload-img";
import { getDickeyList } from "@/api/common";
import { uploadFileByType } from "@/api/wisdom-beam/material-app";
import {
  getRebarProcessDetail,
  processMonitoring,
} from "@/api/wisdom-beam/collect-app.js";
import { getNowDateStr } from "@/utils";
export default {
  components: {
    flowList,
    bjUploadImg,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    type: {
      type: [String, Number],
      default: "1",
    },
    row: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  mixins: [fromMixin],
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          //判断展示的tabs
          this.checkPanelList();
          //查询钢筋设计量
          this.getRebarMode();
          this.getDiameter();
          this.getBreed();
          //查询详情
          this.getDetail();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      activeKey: ["1", "2", "3", "4", "5", "6", "7"],
      panelList: [],
      //头部流程
      flowSource: [],
      buttonLoading: false,
      rebarModeLoading: false,
      rebarDiameterLoading: false,
      rebarTypeLoading: false,
      completeStatus: "",
      pageLoading: false,
    };
  },
  mounted() {},
  methods: {
    moment,
    //查询流程信息
    getFlowList() {
      processMonitoring({ workflowid: "79" })
        .then((res) => {
          let { data } = res;
          let flowList = data?.result || [];
          if (flowList.length > 0) {
            let state = this.completeStatus;
            if (state == 0) {
              state += 1;
            }
            flowList.forEach((v, i) => {
              let { name } = v;
              v.subTitle = name;
              if (i <= state) {
                v.$$nodeStatus = "active";
              }
            });
          }
          this.flowSource = flowList;
        })
        .catch((_) => {})
        .finally((_) => {
          this.pageLoading = false;
        });
    },

    //查询钢筋型号
    getRebarMode() {
      this.rebarModeLoading = true;
      this.queryDickey("gj_model", "rebarModelSource").finally((_) => {
        this.rebarModeLoading = false;
      });
    },

    //查询钢筋直径
    getDiameter() {
      this.rebarDiameterLoading = true;
      this.queryDickey("gj_diameter", "rebarDiameterSource").finally((_) => {
        this.rebarDiameterLoading = false;
      });
    },
    //查询钢筋品种
    getBreed() {
      this.rebarTypeLoading = true;
      this.queryDickey("gj_type", "rebarTypeSource").finally((_) => {
        this.rebarTypeLoading = false;
      });
    },

    //查询字典表
    queryDickey(dictKey, keyName) {
      return new Promise((resolve, reject) => {
        getDickeyList({ dictKey })
          .then((res) => {
            let { data } = res;
            this.form[keyName] = data?.result ?? [];
            resolve();
          })
          .catch((_) => {
            this.form[keyName] = [];
            reject();
          })
          .finally((_) => {});
      });
    },
    //查询详情
    getDetail() {
      this.pageLoading = true;
      return new Promise((resolve, reject) => {
        let { id } = this.row;
        getRebarProcessDetail({ id })
          .then((res) => {
            let { data } = res;
            this.completeStatus = data.result.completeStatus;
            this.form.componentParts = data.result.componentParts;
            this.form.bridgeName = data.result.bridgeName;
            this.form.amClass = data.result.amClass;
            this.form.span = data.result.span;
            this.form.beamTypeDesc = data.result.beamTypeDesc;
            this.form.createrName = data.result.createrName;
            this.form.createTime = data.result.createTime;
            this.form.gjInfoList = data.result?.childList || [];
            this.form.planCompleteTime =
              data?.result?.planCompleteTime ?? getNowDateStr();
            this.form.returnOrderDesc = data.result.returnOrderDesc;
            this.form.receiveName = data.result.receiveName;

            //
            let total = 0;
            let list = [];
            (data.result?.childList || []).forEach((v) => {
              total += Number(v.rebarNum);
              list.push({
                rebarNum: v.rebarNum,
                rebarModel: Number(v.rebarModel),
                rebarDiameter: Number(v.rebarDiameter),
                rebarType: Number(v.rebarType),
              });
            });
            this.form.scJgList = list ?? [];
            this.form.produceUsage = total ?? "";
            this.form.produceTime =
              data.result.produceTime ?? getNowDateStr(true);
            this.form.completeTime =
              data.result.completeTime ?? getNowDateStr(true);
            this.form.testTime = data.result.testTime ?? getNowDateStr(true);
            //
            //生产加工信息
            if (this.type != 3) {
              this.form.produceUsage = data.result.produceUsage;
              (data.result?.produceList || []).forEach((item) => {
                item.rebarModel = Number(item.rebarModel);
                item.rebarDiameter = Number(item.rebarDiameter);
                item.rebarType = Number(item.rebarType);
              });
              this.form.scJgList = data.result?.produceList || [];
            }
            //钢筋质检
            if (this.type != 4) {
              this.form.testName = data.result.testName;
              this.form.testResult = data.result.testResult;
            }

            resolve();
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {
            this.getFlowList();
          });
      });
    },

    //自定义附件上传事件
    upLoadImage({ file }) {
      let formData = new FormData();
      formData.append("uploadFile", file);
      uploadFileByType(formData, "REBAR_PROCESS")
        .then((res) => {
          let { data } = res;
          this.form.completeFileIds.push({
            fileId: data.result.fileId,
            uid: file.uid,
          });
        })
        .catch((_) => {});
    },

    //删除已上传的附件
    deleteImage(file) {
      let { uid } = file;
      this.form.completeFileIds = this.form.completeFileIds.filter(
        (v) => v.uid != uid
      );
    },

    checkStatusName(state) {
      switch (state) {
        case 0:
          return "待接单";

        case 1:
          return "已退回";

        case 2:
          return "待生产";

        case 3:
          return "待质检";

        case 4:
          return "已完成";

        // case 5:
        //   return "已完成";

        default:
          return "-";
      }
    },

    checkStatusClass(state) {
      switch (state) {
        case 0:
          return "pending";

        case 1:
          return "error";

        case 2:
          return "warn";

        case 3:
          return "produce";

        case 4:
          return "normal";

        // case 5:
        //   return "normal";

        default:
          return "cancel";
      }
    },

    getTitle(type = 0) {
      let val = Number(type);
      switch (val) {
        case 1:
          return "接单";

        case 2:
          return "退回";

        case 3:
          return "原材领取";

        case 4:
          return "生产加工";

        case 5:
          return "生产完成";

        case 6:
          return "流程监控";

        default:
          return "--";
      }
    },

    //返回
    closeModal() {
      this.$refs.form.resetFields();
      this.panelList = [];
      this.flowSource = [];
      this.form = {
        //梁号
        componentParts: "",
        //桥梁名称
        bridgeName: "",
        //幅别
        amClass: "",
        //跨
        span: "",
        //梁类型
        beamTypeDesc: "",
        //下单人员
        createrName: "",
        //下单时间
        createTime: "",
        //钢筋设计量
        gjInfoList: [],
        //计划完成时间
        planCompleteTime: "",
        //退回备注
        returnOrderDesc: "",
        //领取时间
        testTime: "",
        //是否合格
        testResult: 0,
        //生产时间
        produceTime: "",
        //生产用量
        produceUsage: "",
        //生产加工信息
        scJgList: [
          {
            rebarModel: undefined,
            rebarDiameter: undefined,
            rebarType: undefined,
            //数量
            rebarNum: "",
          },
        ],
        //生产完成信息
        completeTime: "",
        //图片Id集合
        completeFileIds: [],
        imageList: [],
        //钢筋型号
        rebarModelSource: [],
        //钢筋直径
        rebarDiameterSource: [],
        //钢筋品种
        rebarTypeSource: [],
      };
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
.rebar-process-container {
  height: 100%;
  box-sizing: border-box;
  padding: 10px 10px 10px 10px;
  .flex();
  flex-direction: column;
  .header {
    padding: 15px 20px;
    background-color: #fff;
    box-sizing: border-box;
    .flex();
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f3f4f6;
    &::before {
      content: attr(header);
      height: 18px;
      border-left: 3px solid var(--primary-color);
      padding-left: 10px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #525a5d;
      line-height: 18px;
    }
    .state {
      flex: 1;
      .flex();
      justify-content: space-between;
      align-items: center;
      padding-left: 10px;
      .status-text {
        border-radius: 4px;
        font-size: 14px;
        font-weight: 400;
        padding: 0 8px;
        text-align: center;
        display: inline-block;
        line-height: 22px;
        color: #fff;
        &.pending {
          background: #0098ff;
        }
        &.warn {
          background: #ff993f;
        }
        &.produce {
          background: #f33ecb;
        }
        &.approv {
          background: #ff7113;
        }
        &.error {
          background: #ff3f4a;
        }
        &.normal {
          background: #4bc964;
        }
        &.cancel {
          background: #f1f2f7;
          color: #aab0bc;
        }
      }
    }
  }
  .main {
    background-color: #fff;
    flex: 1;
    height: 100%;
    .custom-scrollbar();
    .flex();
    flex-direction: column;

    .rebar-col-item {
      position: relative;
      .operate-btn {
        position: absolute;
        height: 36px;
        top: 4px;
        right: -36px;
        cursor: pointer;
        .flex();
        align-items: center;
        font-size: 13px;
        .del {
          color: var(--primary-color);
        }
        .add {
          width: 22px;
          height: 22px;
          background: var(--primary-color);
          border-radius: 50%;
          .flex();
          align-items: center;
          justify-content: center;
        }
      }
    }
    //表单布局
    /deep/.ant-form-item {
      .flex();
      .ant-input-affix-wrapper {
        width: 100%;
      }
      .ant-form-item-label {
        flex-shrink: 0;
        width: 170px;
        label {
          color: #999999;
        }
      }
      .ant-form-item-control-wrapper {
        flex: 1;
      }
    }
    .m-r-50 {
      margin-right: 50px !important;
    }
  }
  .footer {
    border-top: 1px solid #f3f4f6;
    background-color: #fff;
    .flex();
    align-items: center;
    justify-content: center;
    padding: 20px 0;
  }
}
</style>
